<template>
	<view class="deep">
		<view class="mt-5" v-if="u_loadmore">
			<u-loadmore status="loading" icon-type="circle" />
		</view>
		<view class="" v-else>
			<view class="bg-white my-2 px-2">
					<u-swipe-action :show="item.is_double" :index="index"
						v-for="(item, index) in ass_list" :key="index" :btn-width="btnWidth"
						@click="click" @content-click="content_click(item,index)" @open="open"
						:options="options"
					>
						<view class="item u-border-bottom d-flex a-center">
							<image class="ass_icon mr-2" mode=""  :src="item.is_double?is_double:double" />
							<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
							<view class="title-wrap">
								<text class="title u-line-2">{{ item.goods_name }}</text>
							</view>
						</view>
					</u-swipe-action>
			</view>
			<view class="">
				<view v-if="option=='详情'" class="bg-white py-2 d-flex px-3  w-100 position-fixed bottom-0 btn">
					<button type="default" @click="ass_goods" class="ass">添加商品</button>
					<button type="warn" @click="hold" class="hold">保存</button>
				</view>
				<view v-else  class="bg-white py-2 d-flex px-3  w-100 position-fixed bottom-0 btn_ass">
					<button type="warn" @click="hold" class="hold_ass">保存</button>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
			data() {
				return {
					double:'../../static/images/goods/icon_linkgoods_not_double.png', // 单箭头
					is_double:'../../static/images/goods/icon_linkgoods_is_double.png', // 双箭头
					assList:'', // 商品列表
					newarr:"",
					ass_list:[],
					btnWidth: 140,
					show: false,
					goods_id:'', // 商品ID
					options: [
						{
							text: '切换关联',
							style: {
								backgroundColor: '#fe9900'
							}
						},
						{
							text: '删除',
							style: {
								backgroundColor: '#efefef',
								color:"#444"
							}
						}
					],
					goods_name:"", // 商品标识
					option:"", // 关联商品标识
					ass_name:"", // 选择
					edit_name:"", // 选择
					newgoods_id:"", // 重复id
					next_name:"",
					u_loadmore:true, // 加载中
				};
			},
			methods: {
				showToast(e) {
					this.$refs.uToast.show({
						title: e,
						type: 'default',
					})
				},
				click(index,index1) {
					console.log(index,index1)
					if(index1 == 1) {
						this.ass_list.splice(index, 1);
						this.$u.toast(`删除成功`);
						this.btnWidth=0
						this.$nextTick(function(){
							this.btnWidth=140
						})
					} else {
						if(this.ass_list[index].is_double){
							this.ass_list[index].is_double = 0;
							this.$u.toast(`取消关联`);
						}else{
							this.ass_list[index].is_double = 1;
							this.$u.toast(`关联成功`);
						}
					}
				},
				// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
				open(index) {
					// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
					// 原本为'false'，再次设置为'false'会无效
					console.log('open',index)
				},
				content_click(item,index){
					console.log(item,index)
				},
				// 添加商品
				ass_goods(){
					uni.navigateTo({
						url:`/pages/goods-edit-ass/goods-edit-ass?goods_id=${this.goods_id}&goods_name=添加`
					})
				},
				// 保存
				hold(){
					let ass_goods='要关联商品不能为商品本身！'
					if(this.edit_name=='选择'||this.next_name=="下一步"){
						if(this.newgoods_id.length==1){
							this.showToast(ass_goods)
						}else{
							this.$H.post("admin/merchant/goods/linkgoods/add",{
								goods_id:this.goods_id,
								linked_goods:JSON.stringify(this.ass_list)
								}).then(res=>{
									uni.navigateBack({
										delta:3
									})
									console.log(this.edit_name,'选择')
							})
						}	
					}else{
						console.log(1)
						let arr_ass=this.ass_list.map((item,index)=>{
							return {
								"goods_id":item.goods_id,
								"is_double":item.is_double
							}
						})
						if(this.newgoods_id.length==1){
							this.showToast(ass_goods)
							console.log(11)
						}else{
							console.log(2)
							this.$H.post("admin/merchant/goods/linkgoods/add",{
								goods_id:this.goods_id,
								linked_goods:JSON.stringify(arr_ass)
							}).then(res=>{
								console.log('详情进来的')
							})
							if(this.goods_name=='添加'){
								uni.navigateBack({
									delta:4
								})
								console.log('添加')
							}else{
								uni.navigateBack({
									delta:1
								})
								console.log('详情')
							}	
						}
					}
				}
			},
			onLoad(e) {
				console.log(e)
				if(e.goods_id){
					this.goods_id=e.goods_id
					this.goods_name=e.goods_name
					this.ass_name=e.ass_name
					this.option=e.option
					this.edit_name=e.edit_name
					this.next_name=e.next_name
				}
				if(e.option=="选择"&&e.goods_name=='添加'){
					this.seach_keywords=e.seach_keywords
					this.cat_id=e.cat_id
					this.$H.post("admin/merchant/goods/linkgoods",{
						goods_id:this.goods_id
					}).then(res=>{
						this.u_loadmore=false 
						this.ass_list=res.data
						let ass= JSON.parse(uni.getStorageSync("ass"))
						let ass_arr=ass.map((item,index)=>{
							return {
								"goods_id":item.goods_id,
								"goods_name":item.goods_name,
								"is_double":0
							}
						})
						this.newgoods_id=ass_arr.filter(v=>{
							if(this.goods_id==v.goods_id){
								return v.goods_id
							}
						})
						console.log(this.newgoods_id)
						this.ass_list=[...this.ass_list,...ass_arr]
						let map = new Map();  
						let arr1 = [];	
						this.ass_list.forEach((item,index)=>{
							if (map.has(item.goods_id)) {      // 判断是否存在该key值
								map.set(item.goods_id, true);
								console.log(map.set(item.goods_id))
							}else {
								map.set(item.goods_id, false);
								console.log(map.set(item.goods_id, false),22)
								return arr1.push(item);
							}
							
						})
						this.ass_list=arr1
					})
				}else{
					uni.removeStorageSync("ass")
					this.$H.post("admin/merchant/goods/linkgoods",{
						goods_id:this.goods_id
					}).then(res=>{
						this.u_loadmore=false 
						this.ass_list=res.data
					})
					console.log(222)
				}
			}
		};
</script>

<style lang="scss">
	.btn /deep/ button{
		width: 43%;
		border-radius: 60upx;
	}
	.btn_ass /deep/ .hold_ass{
		width: 90%;
		border-radius: 60upx;
		background: linear-gradient(to right,#F31E3E,#FB4F37);
	}
	.btn /deep/ .ass{
		border: 1px solid #E1E1E1;
		background: #f4f4f4
	}
	.btn /deep/ .ass::after{
		border: none;
	}
	.ass_icon{
		width: 60rpx;
		flex: 0 0 60rpx;
		height: 60rpx;
		margin-right: 20rpx;
		border-radius: 12rpx;
	}
	
	.item {
		display: flex;
		padding: 20rpx;
	}
	
	.title {
		text-align: left;
		font-size: 28rpx;
		color: $u-content-color;
	}
	
	.u-btn-text{
		width: 100%;
		text-align: center;
	}
	.ass_headers{
		height: 150upx;
		background-color: #FFFFFF;
		z-index: 11;
	}
	.ass_header{
		height: 150upx;
	}
	.ass_goods{
		line-height: 195upx;
	}
	.backtrack{
		width: 40upx;
		height: 40upx;
	}
	.backtrack_ass{
		line-height: 207upx;
		margin-left: 17upx;
	}
</style>

